<template>
	<view style="background-color: #fff;">
		<view style="margin-left: 80rpx;margin-right: 80rpx;">
			<view style="margin-top: 100rpx;"><text style="font-size:64rpx;color: #333333;">登录</text></view>
			<view><text style="font-size:36rpx ;color: #9C9DA8;">您好，欢迎来到登录页！</text></view>
			<view style="margin-top:56rpx;">
				<u-input placeholder="请输入手机号" type="number" @change="changePhone" border="bottom">
					<u-text text="+86" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
				</u-input>
			</view>
			<view style="margin-top:56rpx;">
				<u-input type="number" @change="changeCode" placeholder="输入验证码" border="bottom">
					<template slot="suffix">
						<view @click="getCode" v-if="show"><text style="font-size: 28rpx;color: #409EFF;">发送验证码</text></view>
						<view v-else>
							<text style="font-size: 28rpx;color: #409EFF;">{{ seconds }}S</text>
						</view>
					</template>
				</u-input>
			</view>
		</view>

		<view style="display: flex;flex-direction: column;width: 100vw;align-items: center;">
			<view :class="btnFlag ? 'btn' : 'btn_1'" @click="jump"><text :class="btnFlag ? 'cont' : 'cont_1'">登录</text></view>
			<text style="color:#7F8389;font-size: 24rpx;margin-top:36rpx;">未注册的手机号将自动注册并登录</text>
		</view>
	</view>
</template>

<script>
import { login } from '../../api/home.js';
import { smsAuthCodeSend } from '../../api/mine.js';
export default {
	data() {
		return {
			show: true, //验证码展示
			tips: '',
			value: '',
			seconds: 120,
			phone: '',
			code: '',
			btnFlag: false //登录按钮样式
		};
	},
	watch: {
		value(newValue, oldValue) {

		}
	},
	methods: {
		changePhone(e) {
			console.log(e);
			this.phone = e;
			if (this.phone && this.code) {
				this.btnFlag = true;
			} else {
				this.btnFlag = false;
			}
		},
		changeCode(e) {
			this.code = e;
			if (this.phone && this.code) {
				this.btnFlag = true;
			} else {
				this.btnFlag = false;
			}
		},
		jump() {
			if (!this.btnFlag) {
				return false;
			}
			if (!this.phone) {
				uni.showToast({
					title: '手机号不能为空',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (this.phone.length != 11) {
				uni.showToast({
					title: '请检查手机号是否正确',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (!this.code) {
				uni.showToast({
					title: '验证码不能为空',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			let data = {
				phone: this.phone,
				code: this.code
			};
			uni.showLoading({
				title: '登录中，请稍等'
			});
			login(data).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					uni.hideLoading();
					getApp().globalData.userData = res.data.data;
					uni.setStorage({
						key: 'userData',
						data: res.data.data,
						success: function() {
							console.log('success');
						}
					});
					//获取路径缓存
					uni.getStorage({
						key:'login_back_page',
						success: function(res) {
							//成功后清除路径缓存
							uni.removeStorage({
								key:'login_back_page'
							})
							uni.redirectTo({ url: '../../'+res.data });
						},
						fail() {
							uni.switchTab({ url: '../index/index' });
						}
					})
				} else {
					uni.hideLoading();
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			});
		},
		getCode() {
			if (!this.phone) {
				uni.showToast({
					title: '手机号不能为空',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (this.phone.length != 11) {
				uni.showToast({
					title: '请检查手机号是否正确',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			let data = {
				phone: this.phone
			};
			smsAuthCodeSend(data).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '发送成功',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
			});
			this.show = false;
			const that = this;
			var time = setInterval(function() {
				if (that.seconds > 0) {
					that.seconds = that.seconds - 1;
				} else {
					clearInterval(time);
					that.show = true;
					that.seconds = 120;
				}
			}, 1000);
		},
		change(e) {
			console.log('change', e);
		}
	}
};
</script>

<style>
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #409eff;
	width: 530rpx;
	height: 98rpx;
	margin-top: 193rpx;
	border-radius: 49rpx;
}
.btn_1 {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eeeff3;
	width: 530rpx;
	height: 98rpx;
	margin-top: 193rpx;
	border-radius: 49rpx;
}
.cont {
	color: #fff;
}
.cont_1 {
	color: #666;
}
</style>
